﻿@{

    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<!DOCTYPE html>

<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico"
          href="~/Content/favicon.ico" />
    <link rel="bookmark" type="image/ico"
          href="~/Content/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Content/select2/css/select2.css" rel="stylesheet" />
    <link href="~/Content/framework/css/console.css" rel="stylesheet" />
    <link href="~/Content/framework/css/animate.css" rel="stylesheet" />
    <link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

    <script src="~/Content/jquery/jquery.min.js"></script>
    <script src="~/Content/layui/layui.js"></script>
    <script src="~/Content/select2/js/select2.min.js"></script>
    <script src="~/Content/framework/js/global.js"></script>
</head>
<body>
    <form id="form" class="layui-form" style="margin-top: 25px">
        <div class="layui-form-item">
            <input type="hidden" name="Id" id="Id" />
            <input type="hidden" name="ImagePath" id="ImagePath" />
            <label class="layui-form-label  label-required">选择图片</label>
            <div class="layui-input-inline">
                <img class="image" src="#" alt="" style="width:200px;height:100px;" />
            </div>
            <div class="layui-input-inline">
                <div class="avatar-add">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1">
                            <p id="demoText"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <div class="layui-form-item"> 
            <div class="layui-inline">
                <label class="layui-form-label label-required">图片名称</label>
                <div class="layui-input-inline">
                    <input   name="Name"   placeholder="请输入图片名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <button id="btnSubmit" class="layui-btn" lay-submit lay-filter="add">提交</button>
            </div>
        </div>
    </form>

    <script>
        layui.use(['form', 'upload'], function () {
            var upload = layui.upload;
            var form = layui.form; 
            var primaryKey = $.getQueryString("primaryKey");
            $("#Id").val(primaryKey)
            if (primaryKey) {
                $.ajax({
                    url: "/Ex/Img/GetForm",
                    data: { primaryKey: primaryKey },
                    type: "post",
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        $("#form").formSerialize(data);
                        $('.image').attr('src', data.ImagePath + '?v=' + Math.random());
                    }
                });
            }

            form.render();
              
            form.on('submit(add)', function (data) {
                //获得文本内容
                $.formSubmit({
                    url: "/Ex/Img/Form",
                    data: data.field
                });
                return false;
            });

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1', //绑定元素
                method: 'post',
                ext: 'jpg|png|gif',
                url: '/Ex/Img/UploadImage', //上传接口
                done: function (res) {
                    //上传完毕回调
                    if (res.state == 0) {
                        $.layerMsg(res.message);
                    } else {
                        $('#ImagePath').val(res.data);
                        $('.image').attr('src', res.data + '?v=' + Math.random());
                    }
                },
                error: function () {
                    //请求异常回调
                }
            });
        });
    </script>
</body>
</html>